<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./assets/lib/cropper/cropper.css">
</head>
<style>
  .container {
    margin: 20px;
    float: left;
    width: 600px;
    height: 500px;
  }

  .w200 {
    width: 200px;
    height: 200px;
  }

  .w100 {
    width: 100px;
    height: 100px;
  }

  .w50 {
    width: 50px;
    height: 50px;
  }

  .w30 {
    width: 30px;
    height: 30px;
  }

  .preview {

    background-color: #ccc;
    margin: 10px;
    /* 预览的图片溢出部分隐藏 */
    overflow: hidden;
  }
</style>

<body>

  <div class="container">
    <img src="./assets/images/sample2.jpg">
  </div>

  <div class="preview_box">
    <div class="preview w200"></div>
    <div class="preview w100"></div>
    <div class="preview w50"></div>
    <div class="preview w30"></div>
  </div>
  <!-- 加一个隐藏的文件域 -->
  <!-- 通过 accept 属性控制选择的文件类型 -->
  <input type="file" id="file" style="display: none;" accept="image/jpeg,image/png,image/bmp,image/gif" />

  <button class="layui-btn" id="btnChooseImage">上传</button>


  <script src="./assets/lib/jquery.js"></script>
  <script src="./assets/lib/cropper/Cropper.js"></script>
  <script src="./assets/lib/cropper/jquery-cropper.js"></script>
  <script>
    // 1.1 获取裁剪区域的 DOM 元素
    let $image = $(".container img");

    // 1.2 配置选项
    let options = {
      // 纵横比
      aspectRatio: 1,
      // 指定预览区域
      preview: ".preview",
    };

    // 1.3 创建裁剪区域
    $image.cropper(options);

    // =============================  点击上传, 可以选择图片  =============================
    $('#btnChooseImage').click(function () {
      $('#file').click();
    });

    // =============================  更换剪裁区的图片 =============================

    // 当文件域的内容改变的时候，更换图片
    $('#file').change(function () {
      // 1. 找到选择的图片（文件对象）
      let fileObj = this.files[0]; // 我们选择的图片的文件对象

      // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
      let url = URL.createObjectURL(fileObj);

      // 3. 更换剪裁区的图片的src属性
      // - 销毁原理的剪裁区
      // - 更换图片
      // - 重新创建剪裁区
      $image.cropper('destroy').attr('src', url).cropper(options);
    });


    $('#file').change(function () {
      // 1. 找到选择的图片（文件对象）
      let fileObj = this.files[0]; // 我们选择的图片的文件对象

      if (!fileObj) {
        return;
      }

      // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
      let url = URL.createObjectURL(fileObj);

      // 3. 更换剪裁区的图片的src属性
      $image.cropper('destroy').attr('src', url).cropper(options);
    });

    // ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
    $('#btnCreateAvatar').click(function () {
      // 剪裁得到一张图片（canvas图片）
      let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      });

      // 把图片转成base64格式
      let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串

      // axios
      axios
        .post("/my/update/avatar", "avatar=" + encodeURIComponent(dataURL))
        .then((res) => {
          // 提示
          if (res.data.status !== 0) {
            // 失败
            return layer.msg("更新头像失败");
          }

          layer.msg("更新头像成功");
          // 页面中的头像发生变化（更新）
          window.parent.getUserInfo();
        });
    });
  </script>
</body>

</html>